﻿<template>
    <el-container>
        <el-main>
            <el-form ref="form"
                     :model="data"
                     :rules="formRules"
                     label-width="80px">

                <el-form-item label="角色名称"
                              prop="name">
                    <el-input v-model="data.name"
                              :disabled="data.isStatic"></el-input>
                </el-form-item>

                <el-form-item label=""
                              prop="isDefault">
                    <el-checkbox v-model="data.isDefault">默认</el-checkbox>
                </el-form-item>
                <el-form-item label=""
                              prop="isPublic">
                    <el-checkbox v-model="data.isPublic">公开</el-checkbox>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer style="text-align:right;">
            <el-button @click="$emit('cancel')">取消</el-button>
            <el-button type="primary" @click="onSave">保存</el-button>
        </el-footer>
    </el-container>
</template>

<script>
    export default {
        props: ['id'],
        data() {
            return {
                data: {},
                formRules: {
                    name: [
                        { required: true, message: '请输入角色名称', trigger: 'change' }
                    ]
                }
            }
        },
        mounted() {
            var self = this;
            self.refresh(self.id);
        },
        methods: {
            refresh(id) {
                var self = this;
                if (id === '') {
                    self.data = {
                        name: "",
                        isDefault: false,
                        isPublic: false
                    };
                    return;
                }
                self.$http
                    .get('/api/identity/roles/' + id)
                    .then((res) => {
                        self.data = res;
                    });
            },
            onSave() {
                var self = this;
                self.$refs.form.validate((valid) => {
                    if (valid) {
                        if (self.id === '') {
                            self.$http
                                .post('/api/identity/roles/', self.data)
                                .then(onSaveSuccess)
                                .catch(onSaveError);
                        } else {
                            self.$http
                                .put('/api/identity/roles/' + self.id, self.data)
                                .then(onSaveSuccess)
                                .catch(onSaveError);
                        }
                    } else {
                        return false;
                    }
                });

                function onSaveSuccess(res) {
                    self.data = res;
                    self.$message({
                        message: '保存成功！',
                        type: 'success'
                    });

                    self.$emit("change", res);
                }
                function onSaveError(error) {
                    self.$message({
                        message: error.response.data.error.code,
                        type: 'error'
                    });
                }
            },

        }
    }
</script>

<style scoped>
</style>